import { ref, defineComponent,watchEffect} from 'vue';import {L,s} from '@/lang'
import './Pagination.css';import { domPercent } from '@/utils/t';

const Pagination=defineComponent<P_>({//let P:P_=reactive({page:1,size:10,count:100});
  setup(_,{attrs}) { const{page,size,cb}:P_=attrs,
    leftLi = ref("..."),rightLi = ref("..."),p=ref(page),s=ref(size);
    watchEffect(()=>{cb(p.value,Number(s.value))});
    const parseDOM=(page,total,shift,res = [])=>{
        let start;if(total<4+2*shift){
          for (start=1; start <=total; start++)
            if (start === page)
              res.push(<li class="current">{start}</li>);
            else{let ss=start
              res.push(<li class="tcdNumber"onClick={()=>{p.value=ss;}}>{start}</li>)
            }
        }else{let end=page+shift;start=page-shift;
          if(page>1+shift)res.push(<li class="tcdNumber"onClick={()=>{p.value=1;}}>1</li>);else if(total>2+2*shift)end=2+2*shift;
          if(page > total-2-shift && total-2-shift>0)start=total-1-2*shift;let s=start;
          if(page>2+shift&&start-1>1)res.push(<li class="tcdNumber"onClick={()=>{p.value=shift?s-1:s-2;}}style={`width:${7+shift}px;text-indent:-1px`}
            onMouseover={()=>{leftLi.value='⇇'}}onMouseout={()=>{leftLi.value='...'}}>{leftLi.value}</li>);else leftLi.value='...';
          for (; start <= end; start++)
            if (start <= total && start >0)
              if (start === page)
                res.push(<li class="current">{start}</li>);
              else {let ss=start
                res.push(<li class="tcdNumber" onClick={()=>{p.value=ss}}>{start}</li>);
              }
          if(page<total-1-shift&&end+1<total)res.push(<li class="tcdNumber"onClick={()=>{p.value=shift?end+1:end+2}}style={`width:${7+shift}px;text-indent:-1px`}
            onMouseover={()=>{rightLi.value='⇉'}}onMouseout={()=>{rightLi.value='...'}}>{rightLi.value}</li>);else rightLi.value='...';
          if(page<total-shift)res.push(<li class="tcdNumber"onClick={()=>{p.value=total;}}>{total}</li>)
        }
        return res;
    }
    return{ p,s,parseDOM,attrs }
  },render(){
    const {count,size,shift=domPercent()}:P_=this.attrs,total=Math.ceil(count/size);
    return(
      <ul class="page"onDragstart={()=>false}>
        <li style={{padding:shift?"0px 4px 0px 7px":"0px 2px 0px 5px",fontSize:"9pt",color:"lightskyblue"}}class="disabled">{count+L[s._].article}</li>
        {shift>0&&<select onChange={({target})=>{this.s=target[target.selectedIndex].value}}value={this.s}>
          <option value='5'>{"5/"+L[s._].page}</option><option value='7'>{"7/"+L[s._].page}</option><option value='10'>{"10/"+L[s._].page}</option><option value='15'>{"15/"+L[s._].page}</option>
          <option value='25'>{"25/"+L[s._].page}</option><option value='50'>{"50/"+L[s._].page}</option></select>}
        {shift!==1&&<li class={this.p>1?"prevPage":"disabled"}style={{width:7+shift+"px"}}onClick={()=>{this.p>1&&--this.p}}>←</li>}{this.parseDOM(this.p,total,shift)}
        {shift!==1&&<li class={this.p<total?"nextPage":"disabled"}style={{width:7+shift+"px"}}onClick={()=>{this.p<total&&++this.p;}}>→</li>}
        <input onInput={({target})=>{let n=Number(target.value);if(total<n||n<1)target.value=target.value.slice(0,target.selectionStart-1);
        }}value={this.p}style={{width:"21px",height:"18px",border:"1px deepskyblue solid",marginRight:"1px",textIndent:"-1px",color:"darkcyan"}}type="number"/>
        <button class="button"style={{width:"21px",height:"23px",fontFamily:"serif",fontSize:"9pt",borderColor:"lightskyblue"
        }}onClick={({target})=>{this.p=Number(target.previousSibling.value);}}>{">"}</button>
      </ul>
      )
    }
})
export default Pagination;
interface P_ {
  page?: number;// 当前页[参数]
  size?: 5|7|10|15|25|50;// 每页多少条[参数]
  count?: number;// 条数
  shift?: number;// 偏移量
  cb?: Function;// 触发
}